import { useTitle } from 'ahooks'
import style from './index.less'
import React, { useEffect, useState } from 'react'
import SRC from '@/images/supply/address.png'
import Buy from '@/images/supply/buy.png'
import Wu from '@/images/supply/wu.png'
import Tu from '@/images/supply/invoice.png'
import { Ellipsis, Form, Input, List, Selector } from 'antd-mobile'
import Item from './.item'

interface receiptDto {
    id: string,
    name: string,
    address: string,
    phone: string
}
interface dataDto {
    id: string;
    goodsName: string;
    shopping: string;
    menuName: string;
    unitPrice: string;
    amount: string;
    totalMoney: string;
    picture: string;
    city: string;
    qu: string;
    origin: string;
    time: string;
}

export default () => {
    useTitle('订单详情')
    const [status, setStatus] = useState()
    const [value, setValue] = useState('1')
    const [receiptData, setReceiptData] = useState<receiptDto[]>([]);
    const [data, setData] = useState<dataDto[]>([]);
    const dataList = [
        {
            id: '1',
            goodsName: '需要萝卜 白萝卜附近的卡拉接口附近的卡拉胶恩,阿凡达数据库连接',
            shopping: '四季化肥批发',
            menuName: '白萝卜',
            city: '重庆市',
            qu: '巴南区',
            unitPrice: '3.20',
            amount: '1000000',
            totalMoney: '16000',
            picture: '',
            origin: '内蒙古巴彦淖尔市',
            time: '2022-07-15 12:40'
        },]
    const receipt = [{
        id: '1',
        name: '张德志',
        address: '重庆市渝北区黄山大道中段双鱼座B座18楼',
        phone: '12345678910'
    }]
    const options = [
        {
            label: '现金支付',
            value: '1',
          },
          {
            label: '微信支付',
            value: '2',
          },
          {
            label: '银行卡',
            value: '3',
          },
    ]
    useEffect(() => {
        setReceiptData(receipt)
        setData(dataList)
    }, [])
    return (
        <div className={style.page}>
            <div>
                {receiptData.map((item) => (
                    <div
                        key={item.id}
                        className={style.address}
                    >
                        <div className={style['address-title']}>
                            <img src={SRC} alt='alt' />
                            收货信息
                        </div>
                        <div className={style['address-bottom']}>
                            <div>
                                <span className={style.write}>{item?.name}</span>
                                {item?.phone}
                            </div>
                            <div>{item?.address}</div>
                        </div>
                    </div>
                ))}
            </div>
            <div className={style.po}>
                {data.map((item) => (
                    <div
                        key={item.id}
                        className={style['list-item']}
                    >
                        <div>
                            <div className={style['con-tt']}>
                                <img src={Buy} alt='SRC' />
                                <span>{item?.shopping}</span>
                                <span className={style.business}>企业客户</span>
                            </div>
                            <div className={style.con}>
                                <div className={style['con-left']}>
                                    {item?.picture ? (
                                        <img src={item?.picture} alt="商品图片" />
                                    ) : <img src={Wu} alt='无' />}
                                </div>
                                <div className={style['con-right']}>
                                    <div className={style.name}>
                                        <Ellipsis direction='end' content={item?.goodsName} rows={2} />

                                    </div>
                                    <div className={style.name}>
                                        <span className={style.type}>{item?.menuName}</span>
                                        <span className={style.red}>
                                            <img src={Tu} alt='src' className={style.src} />
                                            不支持在线开票
                                        </span>
                                    </div>
                                </div>
                            </div>
                            <div className={style['box-top']}>
                                <div className={style['box-list']}>
                                    <span className={style.names}>买家出价</span>
                                    <span className={style.red}>{item?.unitPrice}元/斤</span>
                                </div>
                                <div className={style['box-list']}>
                                    <span className={style.names}>数量</span>
                                    <span>×{item?.amount}</span>
                                </div>
                                <div className={style['box-list']}>
                                    <span className={style.names}>合计金额</span>
                                    <span className={style.money}>￥{Number(item?.totalMoney).toFixed(2)}</span>
                                </div>
                            </div>
                            <div className={style['box-bottom']}>
                                <div className={style['box-list']}>
                                    <span className={style.names}>产地</span>
                                    <span >
                                        {item?.city}
                                        {item?.qu}
                                    </span>
                                </div>
                                <div className={style['box-list']}>
                                    <span className={style.names}>发货地</span>
                                    <span>{item?.origin}</span>
                                </div>
                                <div className={style['box-list']}>
                                    <span className={style.names}>订单创建时间</span>
                                    <span className={style.money}>{item?.time}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                ))}
            </div>
            <div className={style['list-a']}>
                <List mode='card'>
                    <List.Item extra={'2.50' + '元/斤'}>卖家出价</List.Item>
                    <List.Item extra={'2.50' + '斤'}>供货数量</List.Item>
                    <List.Item extra={'￥' + '2.50'}>合计金额</List.Item>
                    <List.Item>
                        支付方式
                        <span className={style['list-span']}>银行卡</span>
                    </List.Item>
                </List>
            </div>
            <div className={style['list-a']}>
                <Form layout='horizontal' mode='card'>
                    <Form.Item label='买家出价' extra={'元/斤'}>
                        <Input placeholder='请输入' />
                    </Form.Item>
                    <Form.Item label='采购数量' extra={'斤'}>
                        <Input placeholder='请输入' />
                    </Form.Item>
                    <Form.Item label='合计金额' >
                        <Input />
                    </Form.Item>
                    <Form.Item label='支付方式'>
                        <Selector
                            columns={3}
                            className={style.select}
                            showCheckMark={false}
                            options={options}
                            value={[value]}
                            onChange={v => {
                                if (v.length) {
                                    setValue(v[0])
                                }
                            }}
                        />
                    </Form.Item>
                </Form>
            </div>
            <div className={style.bottom}>
                <Item data={{
                    id: undefined,
                    negotiationState: ''
                }} callback={function (): void {
                    throw new Error('Function not implemented.')
                }} />
            </div>
        </div>
    )
}
